import React, { useState, useEffect } from 'react';
import './Top.css'
import { Card } from 'antd';
import Advertisement from '../advertisement/advertisement'
import Headppt from '../Headppt/headppt'
import Portrait from '../Portrait/portrait'
import Topclass from '../Topclass/topclass'
import Enterprise from '../Enterprise/enterprise'
import Toplogin from '../Toplogin/toplogin'

const Top: React.FC = () => {

  const [isVisible, setIsVisible] = useState(false);
  const [isphoto, setisphoto] = useState(false);
  const [ispic, setispic] = useState(false);
  const [isppt, setisppt] = useState(false);
  const [ispepole, setispepole] = useState(false);
  const [isclass, setisclass] = useState(false);
  const [isprise, setisprise] = useState(false);
  const [isaffair, setisaffair] = useState(false);
  const [isonline, setisonline] = useState(false);
  const [ismanys, setismanys] = useState(false);


  const handleMouseEnter = () => {
    setIsVisible(true);

  }
  const handleMouseLeave = () => {
    setIsVisible(false)

  };

  const photoMouseEnter = () => {
    setisphoto(true)
  }
  const photoMouseLeave = () => {
    setisphoto(false)
  }



  const picMouseEnter = () => {
    setispic(true)
  }
  const picMouseLeave = () => {
    setispic(false)

  };



  const pptMouseEnter = () => {
    setisppt(true)
  }
  const pptMouseLeave = () => {
    setisppt(false)

  };


  const peopleMouseEnter = () => {
    setispepole(true)
  }
  const peopleMouseLeave = () => {
    setispepole(false)

  }


  const classMouseEnter = () => {
    setisclass(true)
  }
  const classMouseLeave = () => {
    setisclass(false)

  }



  const priseMouseEnter = () => {
    setisprise(true)
  }
  const priseMouseLeave = () => {
    setisprise(false)

  }


  const affairMouseEnter = () => {
    setisaffair(true)
  }
  const affairMouseLeave = () => {
    setisaffair(false)

  }


  const onlineMouseEnter = () => {
    setisonline(true)
  }
  const onlineMouseLeave = () => {
    setisonline(false)

  }

  const ismanysMouseEnter = () => {
    setismanys(true)
  }
  const ismanysMouseLeave = () => {
    setismanys(false)

  };




  return (

    <div className="top">

      {/* 头左边 */}
      <div className="top_left">
        <img src="https://s.ibaotu.com/next/img/new/btlogo2.9f48.png" alt="" />
      </div>

      {/* 头中间 */}
      <div className="top_nav">
        <ul className='top_nav_ul'>
          <span>
            <li id='vd' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>视频
              {/* 划过视频的二级菜单 */}
              {isVisible ?
                <div className='video'>
                  <div className='video-hed'>
                    <p><input type="text" placeholder='搜索海量视频模版源文件' /></p>
                    <p className='vip'>全站VIP29元起</p>
                  </div>
                  <div className='video-center'>
                    <p><img src="../src/assets/img/video1.png" alt="" /></p>
                    <p><img src="../src/assets/img/video2.png" alt="" /></p>
                    <p><img src="../src/assets/img/video3.png" alt="" /></p>
                    <p><img src="../src/assets/img/video4.png" alt="" /></p>

                  </div>
                  <div className='video-bom'>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                    <Card title="图文模版" style={{ width: 200, height: 250 }}>
                      <p>红色党政</p>
                      <p>商务科技</p>
                      <p>创意快闪</p>
                      <p>相册照片墙</p>
                      <p>国风水墨</p>
                    </Card>
                  </div>

                </div> : ''}

            </li>
            <li id='line'>|</li>
            <li id='sp' onMouseEnter={photoMouseEnter} onMouseLeave={photoMouseLeave}>实拍
              {/* 划过实拍的二级菜单 */}
              {isphoto ? <div className='photograph'>
                <div className='photo-hed'>
                  <p>
                    <input type="text" placeholder='搜索海量视频模版源文件' />
                    <span className='iconfont icon-sousuo'></span>
                  </p>
                </div>
                <div className='photo-center'>
                  <p><img src="../src/assets/img/video5.png" alt="" /></p>
                  <p><img src="../src/assets/img/video6.png" alt="" /></p>
                  <p><img src="../src/assets/img/video7.png" alt="" /></p>
                </div>
                <div className='photo-bom'>
                  <Card title="自然世界" style={{ width: 200, height: 248 }}>
                    <p>壮美山河</p>
                    <p>海边沙滩</p>
                    <p>蓝天白云</p>
                    <p>可爱动物</p>
                    <p>森林树木</p>
                  </Card>
                  <Card title="人文生活" style={{ width: 200, height: 248 }}>
                    <p>壮美山河</p>
                    <p>海边沙滩</p>
                    <p>蓝天白云</p>
                    <p>可爱动物</p>
                    <p>森林树木</p>
                  </Card>
                  <Card title="行业聚焦" style={{ width: 200, height: 248 }}>
                    <p>壮美山河</p>
                    <p>海边沙滩</p>
                    <p>蓝天白云</p>
                    <p>可爱动物</p>
                    <p>森林树木</p>
                  </Card>
                </div>
              </div> : ''}
            </li>
          </span>

          <li id='pic' onMouseEnter={picMouseEnter} onMouseLeave={picMouseLeave}>广告
            {ispic ? <Advertisement></Advertisement> : ''}

          </li>
          <li id='ppt' onMouseEnter={pptMouseEnter} onMouseLeave={pptMouseLeave}>PPT
            {isppt ? <Headppt /> : ''}

          </li>
          <span>
            <li id='sp'>摄像</li>
            <li id='line'>|</li>
            <li id='people' onMouseEnter={peopleMouseEnter} onMouseLeave={peopleMouseLeave}>人像
              {ispepole ? <Portrait></Portrait> : ''}

            </li>
          </span>
          <li className='source_material' onMouseEnter={classMouseEnter} onMouseLeave={classMouseLeave}>全部素材
            {isclass ? <Topclass></Topclass> : ''}


          </li>
          <li id='enterprise' onMouseEnter={priseMouseEnter} onMouseLeave={priseMouseLeave}>企业站
            {isprise ? <Enterprise></Enterprise> : ''}


          </li>
          <li className='affair' onMouseEnter={affairMouseEnter} onMouseLeave={affairMouseLeave}>政务图库
            {isaffair ? <div className='affairs'><img src="../src/assets/img/zhengwu.png" alt="" /></div> : ''}

          </li>

          <li className='online' onMouseEnter={onlineMouseEnter} onMouseLeave={onlineMouseLeave}>在线设计
            {isonline ? <div className='isonline'>
              <img src="../src/assets/img/zaixian.png" alt="" />
            </div> : ''}
          </li>
          <li className='many' onMouseEnter={ismanysMouseEnter} onMouseLeave={ismanysMouseLeave}>更多工具
            {ismanys ? <div className='manys'>
              <ul>
                <li>热门活动</li>
                <li>精品专题</li>
                <li>个性推荐</li>
              </ul>
            </div> : ''}

          </li>
        </ul>

      </div>
      {/* 头右边 */}
      <div className="top_right">
        <div className='spandiv'>
          <span>
            企业VIP授权
          </span>

          <span>
            个人VIP
          </span>

          <p className='cimg'>
              <Toplogin/>
          </p>
       
        </div>
      </div>


      {/* 弹窗 */}





    </div>



  )
}

export default Top



